<template>
	<div class="checkbox-group">
		<checkbox-group @change="changeCheckboxGroup" v-if="optionType === 'default'" class="checkbox">
			<label v-for="item in options" :key="item.value + '' + flag">
				<checkbox :value="'' + item.value" :disabled="disabled ? disabled : item.disabled" :checked="checked(item.value)" style="transform: scale(0.7)" />
				{{ item.label }}
			</label>
		</checkbox-group>
		<view class="uni-list" v-else>
			<checkbox-group @change="changeCheckboxGroup" class="group">
				<label class="uni-list-cell uni-list-cell-pd" v-for="item in options" :key="item.value + '' + flag">
					<view>
						<checkbox :value="'' + item.value" :disabled="disabled ? disabled : item.disabled" :checked="checked(item.value)" :style="sizeStyle" />
					</view>
					<view :style="sizeStyleText">{{ item.label }}</view>
				</label>
			</checkbox-group>
		</view>
	</div>
</template>

<script>
export default {
	name: "vCheckbox",

	model: {
		prop: "value",
		event: "update:value",
	},

	data() {
		return {
			flag: 0,
		}
	},
	props: {
		value: {
			type: Array, //[1,2]
			default: () => [],
		},
		options: {
			type: Array,
			default: () => [],
		},
		disabled: {
			type: Boolean,
			default: false,
		},
		optionType: {
			type: String,
			default: "default",
		},
		size: {
			type: String,
			default: "medium",
		},
		min: {
			type: Number,
			default: 0,
		},
		max: {
			type: Number,
			default: 0,
		},
	},
	components: {},

	computed: {
		sizeStyle() {
			let scale = 0.7
			switch (this.size) {
				case "mini":
					scale = 0.5
					break
				case "medium":
					scale = 0.7
					break
				case "small":
					scale = 0.6
					break
				default:
					scale = 0.7
					break
			}
			return {
				transform: `scale(${scale})`,
			}
		},
		sizeStyleText() {
			let fontsize = 28
			switch (this.size) {
				case "mini":
					fontsize = 24
					break
				case "medium":
					fontsize = 28
					break
				case "small":
					fontsize = 26
					break
				default:
					fontsize = 28
					break
			}
			return {
				fontSize: `${fontsize}rpx`,
			}
		},
	},

	methods: {
		checked(val) {
			let checkValue = val + ""
			// console.log(this.value.join(",").split(",").includes(checkValue), "checkedtrue") //数字里的数字转字符串
			return this.value.join(",").split(",").includes(checkValue)
		},
		changeCheckboxGroup(e) {
			let arr = []
			e.detail.value.forEach(item => {
				arr.push(item)
			})
			if (this.max > 0 && arr.length == this.max) {
				this.options.forEach(item => {
					let itemValue = item.value + ""
					if (!arr.includes(itemValue)) {
						this.$set(item, "disabled", true)
					} else {
						this.$set(item, "disabled", false)
					}
				})
			} else if (this.min > 0 && arr.length == this.min) {
				this.options.forEach(item => {
					let itemValue = item.value + ""
					if (arr.includes(itemValue)) {
						this.$set(item, "disabled", true)
					} else {
						this.$set(item, "disabled", false)
					}
				})
			} else {
				this.options.forEach(item => {
					this.$set(item, "disabled", false)
				})
			}
			this.$emit("update:value", arr)
			this.flag++
		},
	},
	watch: {
		disabled: {
			handler(val) {
				if (!val) {
					this.options.forEach(item => {
						this.$set(item, "disabled", false)
					})
				}
			},
			immediate: true,
		},
		value: {
			handler(val) {
				if (this.max > 0 && val.length == this.max) {
					this.options.forEach(item => {
						let itemValue = item.value + ""
						if (!val.join(",").split(",").includes(itemValue)) {
							this.$set(item, "disabled", true)
						} else {
							this.$set(item, "disabled", false)
						}
					})
				} else if (this.min > 0 && val.length == this.min) {
					this.options.forEach(item => {
						let itemValue = item.value + ""
						if (val.join(",").split(",").includes(itemValue)) {
							this.$set(item, "disabled", true)
						} else {
							this.$set(item, "disabled", false)
						}
					})
				} else {
					this.options.forEach(item => {
						this.$set(item, "disabled", false)
					})
				}
			},
			immediate: true,
		},
	},
}
</script>
<style lang="scss" scoped>
.uni-list-cell {
	display: flex;
	justify-content: flex-start;
	padding-bottom: 5rpx;
}
.group {
	display: flex;
	flex-direction: column;
}
.checkbox {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12rpx;
}
</style>
